<template>
    <div class="app-container">
        <div class="jslb">讲师列表</div>
        <el-form :inline="true" :model="teacherQuery" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
                    <el-option label="高级讲师" :value="1"></el-option>
                    <el-option label="首席讲师" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="添加时间">
                <el-date-picker v-model="teacherQuery.begin" type="date" placeholder="选择开始时间"></el-date-picker>
                <el-date-picker v-model="teacherQuery.end" type="date" placeholder="选择截至时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button plain @click="resetData">清空</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="序号" width="70">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="名称" width="70">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="头衔" width="80" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.level === 1 ? '高级讲师' : '首席讲师' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="资历" align="center">
                <template slot-scope="scope">
                    {{ scope.row.intro }}
                </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="添加时间" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.gmtCreate }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="排序" width="60">
                <template slot-scope="scope">
                    <span>{{ scope.row.sort }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <router-link :to="`/teacher/edit/${scope.row.id}`">
                        <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                    </router-link>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteApi(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="text-align:center;margin-top: 20px;" @current-change="getList" :current-page="page"
            :page-size="limit" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
import teacherApi from '@/api/teacher'
export default {
    data() {
        return {
            formInline: {},
            list: null,//当前列表所需的数据
            listLoading: true,//转菊花效果
            page: 1,//当前页
            limit: 10,//每页记录数
            teacherQuery: {},//条件查询对象
            total: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList(page = 1) {
            // 获取当前页码
            this.page = page
            this.listLoading = true
            //调用获取讲师列表的api
            teacherApi.getList(this.page, this.limit, this.teacherQuery).then(res => {
                console.log(res);
                // 获取api中的数据
                this.list = res.data.items
                // 获取总记录数
                this.total = res.data.totalCount
                // 让菊花停止转动
                this.listLoading = false
            })
        },
        // 清空
        resetData() {
            this.teacherQuery = {}
            this.getList()
        },
        // 删除
        deleteApi(id) {
            console.log(id);
            this.$confirm('您确定要删除该讲师吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                teacherApi.deleteById(id).then(res => {
                    // 删除成功提示消息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 重新加载数据
                    this.getList()
                });
            }).catch(() => {

            });
        }
    }
}
</script>
<style scoped>
.jslb {
    color: #A25900;
    font-size: 20px;
    font-weight: 800;
    line-height: 40px;
}
</style>